import React, { Component } from 'react';
import { Chart, Line, Point } from 'bizcharts'; import DataCategory from '../../types/DataCategory';
import DataType from '../../types/DataType';
import Device from '../../types/Device';
import DeviceData from '../../types/DeviceData';

interface twoDimensionalData {
    row: number
    column: number
}
interface twoDimensinalBody {
    rowName: string  //横坐标
    columnName: string   //纵座标
    data: twoDimensionalData[]
}

interface dataFor2DComparation {
    rowName: string
    colName: string
    data: {
        row: number
        column: number
        color: string
    }[]
}
interface IProps {
    allCateToDisplay: Set<DataCategory>
    addedDeviceWithData: Set<{ device: Device, deviceDataList: DeviceData[] }>
}
export default class TwoDComparation extends Component<IProps> {
    render() {
        const { allCateToDisplay, addedDeviceWithData } = this.props
        return (
            //对每个二维数据
            Array.from(allCateToDisplay).filter(itemCate => itemCate.dataType === DataType.TWODIMENSIONAL).map(itemCate => {
                //处理所需数据
                console.log("eachItemCateeeee", itemCate);

                let dataOfSpecificCate: dataFor2DComparation = {
                    rowName: "横坐标default",
                    colName: "纵坐标default",
                    data: []
                };
                Array.from(addedDeviceWithData).forEach(item => {
                    if (item.deviceDataList.map(itemDeviceData => itemDeviceData.categoryID).includes(itemCate.dataCategoryID)) {
                        console.log("找到匹配数据类型");
                        const itemDeviceDataWithSuitableCate: DeviceData = item.deviceDataList.filter(itemDeviceData => itemDeviceData.categoryID === itemCate.dataCategoryID)[0];
                        const responseValue: twoDimensinalBody = JSON.parse(itemDeviceDataWithSuitableCate.dataValue);
                        dataOfSpecificCate.colName = responseValue.columnName;
                        dataOfSpecificCate.rowName = responseValue.rowName;
                        responseValue.data.forEach(eachPair => {
                            dataOfSpecificCate.data.push({
                                row: eachPair.row,
                                column: eachPair.column,
                                color: item.device.deviceName
                            })
                        })
                    }
                })
                //渲染
                return (
                    <div style={{ width: '100%', minHeight: '300px' }}>
                        <div className="titleBox" style={{ width: '100%', marginTop: '48px' }}>
                            <h1 style={{ fontWeight: 'bolder', fontSize: '20px' }}>{itemCate.dataCategoryName}</h1>
                        横坐标：{dataOfSpecificCate.rowName}
                            <br />
                        纵坐标：{dataOfSpecificCate.colName}
                        </div>
                        <Chart padding={[10, 20, 50, 40]} autoFit height={350} data={dataOfSpecificCate.data} >
                            <Line shape="smooth" position="row*column" color="color" />
                            <Point position="row*column" color="city" />
                        </Chart>
                    </div>
                )
            })
        )
    }
}
